<template>
    <div>
        <div class="headerRightIcon">
            <div @click="scale()" :title="isScale ? '进入全屏' : '退出全屏'"
                :class="['iconfont', isScale ? 'icon-quanpingxianshi' : 'icon-suofang']"></div>
            |
            <el-dropdown trigger="click">
                <div title="字体大小" class="iconfont icon-zitidaxiao"></div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="changeSize('small')">
                            较小
                        </el-dropdown-item>
                        <el-dropdown-item @click="changeSize('default')">
                            默认
                        </el-dropdown-item>
                        <el-dropdown-item @click="changeSize('large')">
                            较大
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            |
            <div class="colorIconBox">
                <div class="colorIcon">
                    <el-icon size="16" color="white">
                        <ArrowDown />
                    </el-icon>
                </div>
            </div>
            |
            <div class="language">
                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        {{ language == 'zh' ? '中文' : 'English' }}
                        <el-icon class="el-icon--right">
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="changeLang('zh')">中文</el-dropdown-item>
                            <el-dropdown-item @click="changeLang('en')">English</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import screenfull from "screenfull";
import { nextTick, ref } from 'vue'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()

var isShow = ref(true)//是否刷新
const refresh = () => {
    isShow.value = false
    refreshStatue()
    nextTick(() => {
        isShow.value = true
        refreshStatue()
    })
}
//语言
let language = ref(localStorage.getItem('locale'))
function changeLang(lang: string) {
    locale.value = lang
    localStorage.setItem('locale', lang)// 重要！下面遇到问题里解释
    language.value = localStorage.getItem('locale')
    refresh()
}
var allSize = ref('')//全局组件大小
var isScale = ref(true)//是否全屏

// 全屏
const scale = () => {
    isScale.value = !isScale.value
    screenfull.toggle();
}
// 组件大小
const changeSize = (size: string) => {
    allSize.value = size
    backSize()
}


// 子传父通过数组的形式传值，定义子传父的事件defineEmits([自定义名称])
const emit = defineEmits(['setSize', 'refresh'])
const backSize = () => {
    emit('setSize', { backStatus: allSize.value }) // 回传
}
const refreshStatue = () => {
    emit('refresh', isShow.value) // 回传
}
</script>

<style lang="less" scoped>
.headerRightIcon {
    width: 200px;
    font-size: 28px;
    display: flex;
    margin-right: 1vw;
    justify-content: space-around;
    color: #999696;

    .iconfont {
        margin-top: 8px;
        color: #333;
        font-size: 22px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .colorIconBox {
        margin-top: 8px;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: #cecfd0 solid 1px;

    }

    .colorIcon {
        width: 22px;
        height: 22px;
        text-align: center;
        line-height: 18px;
        background-color: rgb(170, 211, 198);
    }

    .language {
        height: 20px;
        padding: 5px;
        margin-top: 8px;

        .el-dropdown-link {
            color: var(--el-color-primary);

        }
    }
}
</style>